<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一些列子</title>
  <style type="text/css">
    .st0{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
    body{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<!-- ================================
http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/
http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

一条直线
<line class="st0" x1="117" y1="318.9" x2="459" y2="318.9"/>

折线  用,分割x和y坐标
<polyline class="st0" points="117,318 289,309 459,318 "/>

三次贝塞尔曲线
<path class="st0" d="M1,1 C1,1 150,100 200,1 S250,10 300,80 S350,10 400,80"/>
  -起始点: M1 1
  C指令其中至少有3个点
     控制点1：C1 1
     控制点2：150 100
     结束点： 200 1

  S指令有两个点 S250,10 300,80
    S250,10 控制点 平滑结束点
    300,80 结束点

二次贝塞尔曲线

  Q指令两个点 Q x1 y1, x y
  T指令一个结束点 Tx y

更有意思的属性
http://svgtrick.com/tricks/fee5f6a8921241e655ad320deda5fac9

描线动画：
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: offset 1.6s cubic-bezier(.27,.56,.09,.98) forwards;

  @keyframes offset {
    to {
      stroke-dashoffset: 0;
    }
  }



// 例子
  stroke-dasharray: 348 740 0;
  stroke-dashoffset: 65;
  transition: all .3s ease-in-out;


获取 path 长度
document.querySelector('path').getTotalLength()


M	moveto  移动到	(x y)+
Z	closepath  关闭路径	(none)
L	lineto  画线到	(x y)+
H	horizontal lineto  水平线到	x+
V	vertical lineto  垂直线到	y+
C	curveto  三次贝塞尔曲线到	(x1 y1 x2 y2 x y)+
S	smooth curveto  光滑三次贝塞尔曲线到	(x2 y2 x y)+
Q	quadratic Bézier curveto  二次贝塞尔曲线到	(x1 y1 x y)+
T	smooth quadratic Bézier curveto  光滑二次贝塞尔曲线到	(x y)+
A	elliptical arc  椭圆弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	Catmull-Rom curveto*  Catmull-Rom曲线	x1 y1 (x y)+


C+S 组成连续 三次贝塞尔曲线   d="M20 20 C90 40 130 40 180 20 S250 60 280 20"
Q+T 连续二次贝塞尔曲线 d="M20 10 Q140 40 180 20 T280 30"

// 一图看明白
// http://dayu.pw/svgcontrol/

=====================================-->

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 640 480" width="100%">
  <path class="st0" d="M640,281.5 c-80,2.7-118-58-188.7-58 S386,270.8,284,270.8 s-94-23.5 -162.7-23.5 S52.7,262.1,0,262.1"/>
  <path class="st0" d="M640,281.5 c-80,2.7-118-58-188.7-58 S386,270.8,284,270.8 s-94-42.1 -162.7-42.1 S52.7,262.1,0,262.1"/>
</svg>

<!--
  添加了一个 Q160,120 点
 -->
<svg width="320" height="360">
  <path d="M0,0 L320,0 320,160 Q160,120 0,160" fill="#3F51B5"></path>
</svg>

<script>

</script>
</body>
</html>
